<template>
	<div class="food">
		<el-form :model="form">
			<h3 class="no-select">欢迎发布新菜谱，介绍一下你的大作！</h3>
			<el-card>
				<el-form-item>
					<span class="no-select">标题</span>
					<el-input
						placeholder="请输入内容"
						v-model="backData.title"
					></el-input>
				</el-form-item>
				<el-form-item>
					<span class="no-select">属性</span><br />
					<el-select
						:placeholder="item.parent_name"
						v-model="backData.property[item.title]"
						v-for="item in properties"
						:key="item.parent_type"
						class="attri"
					>
						<el-option
							v-for="list in item.list"
							:key="list.type"
							:label="list.name"
							:value="list.type"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<span class="no-select">菜谱分类</span><br />
					<el-select
						placeholder="请选择菜谱分类"
						v-model="backData.classify"
					>
						<el-option-group
							v-for="group in classifies"
							:key="group.parent_type"
							:label="group.parent_name"
						>
							<el-option
								v-for="option in group.list"
								:key="option.type"
								:label="option.name"
								:value="option.type"
							>
							</el-option>
						</el-option-group>
					</el-select>
				</el-form-item>
				<el-form-item>
					<span class="no-select">成品图(328*440)</span>
					<el-row :gutter="10">
						<el-col :span="8">
							<upload-comp
								action="/api/upload?type=product"
								:imgUrl="backData.product_pic_url || product"
								@res-url="
									(data) =>
										(backData.product_pic_url =
											data.resImgUrl)
								"
							></upload-comp>
						</el-col>
						<el-col :span="16">
							<el-input
								type="textarea"
								:rows="15"
								v-model="backData.product_story"
								placeholder="请输入内容"
							>
							</el-input>
						</el-col>
					</el-row>
				</el-form-item>
			</el-card>
			<h3 class="no-select">记录所有原材料</h3>
			<el-card>
				<el-form-item>
					<span class="no-select">主料</span>
					<suff v-model="backData.raw_material.main_material"></suff>
				</el-form-item>
				<el-form-item>
					<span class="no-select">辅料</span>
					<suff
						v-model="backData.raw_material.accessories_material"
					></suff>
				</el-form-item>
			</el-card>
			<h3 class="no-select">
				开始写步骤了！能否简单易学看你怎么写了，加油！
			</h3>
			<el-card>
				<el-form-item>
					<step-upload
						v-for="(item, index) in backData.steps"
						:key="item.id"
						:data="item"
						:index="index"
						@res-url="resUrl"
						@remove-step="removeStep"
						url="step"
					></step-upload>
				</el-form-item>
				<el-button type="info" class="add_step" @click="addStep">
					+增加一步
				</el-button>
				<el-form-item>
					<span>烹饪小技巧</span>
					<el-input
						type="textarea"
						:rows="8"
						placeholder="分享下你做这道菜的股哦城中的心得和技巧吧！"
						v-model="backData.skill"
					></el-input>
				</el-form-item>
			</el-card>
			<el-button class="submit no-select" @click="submit"
				>搞定，提交审核</el-button
			>
		</el-form>
	</div>
</template>

<script>
import Suff from './suff.vue';
import StepUpload from './stepUpload.vue';
import { getProperty, getClassify, addFood } from '@/api/menu.js';
import UploadComp from '@/components/UploadComp';
export default {
	components: { Suff, StepUpload, UploadComp },
	data() {
		return {
			form: {},
			product: 'https://s1.ax1x.com/2022/05/23/XSvGzd.png',
			step: 'https://s1.ax1x.com/2022/05/23/XpSfTP.png',
			properties: [], //属性 -> 页面中展示数据
			classifies: [], //分类 -> 页面中展示数据
			backData: {
				title: '',
				property: {},
				classify: '',
				product_pic_url: '', //成品图
				product_story: '', //菜谱介绍
				raw_material: {
					//原材料
					main_material: [
						{
							name: '',
							specs: '',
						},
						{
							name: '',
							specs: '',
						},
						{
							name: '',
							specs: '',
						},
					], //主料 默认三项
					accessories_material: [
						{
							name: '',
							specs: '',
						},
						{
							name: '',
							specs: '',
						},
						{
							name: '',
							specs: '',
						},
					], //辅料 默认三项
				},
				// 步骤
				steps: [
					{
						id: this.stepId(),
						img_url: '',
						describe: '',
					},
					{
						id: this.stepId(),
						img_url: '',
						describe: '',
					},
					{
						id: this.stepId(),
						img_url: '',
						describe: '',
					},
				],
				skill: '', //心得/小技巧
			},
		};
	},
	async mounted() {
		//   获取属性
		const { data: properties } = await getProperty();
		this.properties = properties;
		const obj = {};
		for (let i in properties) {
			obj[properties[i].title] = '';
		}
		this.backData.property = obj;
		// 获取分类
		const { data: classifies } = await getClassify();
		this.classifies = classifies;
		console.log(classifies, properties);
	},
	methods: {
		stepId() {
			// 生成步骤的唯一值
			return Date.now() + Math.random();
		},
		resUrl(data, index) {
			console.log(data, index);
			this.backData.steps[index].img_url = data.resImgUrl;
		},
		// 添加步骤
		addStep() {
			this.backData.steps.push({
				id: this.stepId(),
				img_url: '',
				describe: '',
			});
		},
		// 删除步骤
		removeStep(e) {
			console.log(e);
			this.backData.steps = this.backData.steps.filter(
				(item, index) => index != e
			);
		},
		veriData(param) {
			var bool = true;
			for (let key in param) {
				if (param[key].constructor === String && !param[key]) {
					this.$alert('请将数据填写完整', '提示', {
						type: 'warning',
					});
					bool = false;
				} else if (
					param[key].constructor === Array &&
					param[key].length == 0
				) {
					this.$alert('请将数据填写完整', '提示', {
						type: 'warning',
					});
					bool = false;
				} else if (param[key].constructor === Object) {
					this.veriData(param[key]);
				}
			}
			return bool;
		},
		submit() {
			let param = this.backData;
			console.log(param);
			console.log(this.veriData(param));
			if (this.veriData(param)) {
				// 删除步骤id
				param.steps = param.steps.map((item) => {
					return {
						img_url: item.img_url,
						describe: item.describe,
					};
				});
				addFood(this.backData).then((res) => {
					console.log(res);
					if (res.code == 0) {
						this.$message.success(res.mes);
						this.$router.push({ name: 'userspace' });
					} else {
						this.$message.info(res.mes);
					}
				});
			}
		},
	},
};
</script>

<style lang="sass" scoped>
h3
	padding: 20px
	text-align: center
	font-weight: normal
.add_step
	margin-left: 100px
	margin-bottom: 20px
.stepIndex
	font-size: 60px
	color: #a9a9a9
	text-align: center
	line-height: 200px

.submit
	background-color: #c90000
	color: #fff
	display: block
	margin: 0 auto
	width: 300px
	height: 60px
	margin-top: 20px
.attri
	margin-right: 20px
</style>


